<template>
	<div class="box"></div>
	<button @click="add">添加</button>
</template>
<script>
import { gsap } from 'gsap';
export default {
	data() {
		return {

		}
	},
	methods: {
		add() {
			console.log(`helloworld`);
		},
		checkInRanges(ranges, number) {
			number = 1.5;
			ranges = [[1, 2], [4, 5]];
			let res;
			for (let range of ranges) {
				console.log(`range`, range);
				const [start, end] = range;
				if (number >= start && number <= end) {
					res = range;
					break;
				}
			}
		}
	},
	mounted() {
		let res = gsap.utils.snap([0, 20, 40], 30);
		console.log(res);
		let greetingFunc = gsap.utils.pipe(res => {
			return Promise.resolve(`你好` + res);
		}, res => {
			return res.then(res => {
				return `我好` + res
			})
		}, res => {
			return res.then(res => {
				return `大家好` + res
			})
		});

		let mapWindowScreen = gsap.utils.mapRange(0, 1, 0, window.innerWidth);
		let ww = mapWindowScreen(0.5);
		console.log(`ww` + ww);
		greetingFunc('cjm').then(res => {
			console.log(res);
		})

		const randomNumber = gsap.utils.random(0, 500, 5);
		console.log(`randomNumber`, randomNumber);
		const normalizeNumber = gsap.utils.normalize(0, 100);
		let normalizeResult = normalizeNumber(50);
		console.log('normalizeResult', normalizeResult);
		let clampNumber = gsap.utils.clamp(0, 100);
		let clampN1 = clampNumber(-1);
		let clampN2 = clampNumber(105);
		let clampN3 = clampNumber(51);
		console.log(clampN1, clampN2, clampN3);
		let snapWithNumber50 = gsap.utils.snap([0, 50], 30);
		console.log(`snapWithNumber50`, snapWithNumber50);

		this.checkInRanges();
	}
}
</script>
<style lang="scss">
.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}
</style>